<!--
 * @Author: lzz
 * @pageName: MainPages1
 * @Date: 2019-08-07 11:59
 * @events
   @props
 -->

<template>
    <div class="mainpages">
        <gisplus-title1></gisplus-title1>
        <div class="mainpages-box-left">
            <div class="mainpages-box-min" style="height: 3.3rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>人员管理</span>
                </div>
                <div style="display:flex">
                    <echarts id="mainpages1-1" :option="view1_2_data" :styles="mainpages1_1"></echarts>
                    <div style="width: 2rem;height:1.6rem;color: #37a2da;">
                        <div style="margin-bottom: 0.25rem;font-size: 0.16rem">现场人员数量</div>
                        <div>中心实验室：<span style="color: #F8BC38;">1024人/次</span></div>
                        <div>监理单位：<span style="color: #F8BC38;">128人/次</span></div>
                        <div>施工单位：<span style="color: #F8BC38;">2048人/次</span></div>
                        <div>指挥部：<span style="color: #F8BC38;">64人/次</span></div>
                    </div>
                </div>
                <echarts id="mainpages22" :option="view1_3_data" :styles="mainpages1_2"></echarts>
            </div>
            <div class="mainpages-box-min" style="height: 2.8rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>机械设备管理</span>
                </div>
                <div class="shebei">
                    <div class="shebei-left">
                        <p class="shebei-left-line" style="color: #37a2da;font-size: 0.16rem">清单统计</p>
                        <p class="shebei-left-line">
                            <span class="shebei-left-label">架桥机：</span>
                            <span class="shebei-left-num">3</span>
                            <span class="shebei-left-until">台</span>
                        </p>
                        <p class="shebei-left-line">
                            <span class="shebei-left-label">装载机：</span>
                            <span class="shebei-left-num">3</span>
                            <span class="shebei-left-until">台</span>
                        </p>
                        <p class="shebei-left-line">
                            <span class="shebei-left-label">挖掘机：</span>
                            <span class="shebei-left-num">3</span>
                            <span class="shebei-left-until">台</span>
                        </p>
                    </div>
                    <div class="shebei-right" style="padding-top: 0.2rem">
                        <p class="shebei-left-line" style="margin-bottom:0;color: #37a2da;font-size: 0.16rem">状态统计</p>
                        <echarts id="mainpages13" :option="view_1_3_data" :styles="mainpages1_3"></echarts>
                    </div>
                </div>
            </div>
            <div class="mainpages-box-min" style="height: 2rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>物料管理</span>
                </div>
                <div class="mainpages-table renyuan-box">
                    <p style="color: #fff;"><span style="color: #37a2da;">物料库存量</span>
                        （单位：吨/立方米/件/米）</p>
                    <table>
                        <thead>
                        <tr>
                            <th style="width: 25%;">物料名称</th>
                            <th style="width: 25%;">数量</th>
                            <th style="width: 25%;">物料名称</th>
                            <th style="width: 25%;">数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(p,index) in wuliao" :key="index">
                            <td>{{p.name}}</td>
                            <td>{{p.num}}</td>
                            <td>{{p.name1}}</td>
                            <td>{{p.num1}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mainpages-box-mid">
            <div class="mainpages-box-min" style="height: 6.1rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>GIS</span>
                </div>
                <div class="gismid">
                    <div class="gismid-title">
                        <el-button type="text" @click="changePoint(1)" :style="{color: active==1?'#F8BC38':''}">重点工程
                        </el-button>
                        <el-button @click="changePoint(2)" type="text" :style="{color: active==2?'#F8BC38':''}">人员定位
                        </el-button>
                        <el-button @click="changePoint(3)" type="text" :style="{color: active==3?'#F8BC38':''}">监控监测
                        </el-button>
                        <el-button @click="changePoint(4)" type="text" :style="{color: active==4?'#F8BC38':''}">风险分布
                        </el-button>
                        <el-button @click="changePoint(5)" type="text" :style="{color: active==5?'#F8BC38':''}">隐患分布
                        </el-button>
                    </div>
                    <iframe src="http://baisha.checcbim.com/gis/index.html?config=http://gis.checcbim.com/baisha/config.json"
                            frameborder="0"
                            class="gisplus-iframe"
                            id="gisplusiframe"></iframe>
                </div>
            </div>
            <div class="mainpages-box-min" style="height: 2.4rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>安质巡检</span>
                </div>
                <div class="shebei">
                    <!--环保问题-->
                    <div style="position: relative">
                        <router-link to="/anbao" class="mainpages-box-title-jump"
                                     style="position: absolute;top: 10px;right: 10px;">
                            查看详情
                        </router-link>
                        <echarts id="huanbaowenti1" :option="hbwt_data" :styles="aq"></echarts>
                    </div>
                    <!--安全问题-->
                    <div style="position: relative">
                        <router-link to="/anbao" class="mainpages-box-title-jump"
                                     style="position: absolute;top: 10px;right: 10px;">
                            查看详情
                        </router-link>
                        <echarts id="huanbaowenti2" :option="yhzz_data" :styles="aq"></echarts>
                    </div>
                    <!--质量问题-->
                    <div style="position: relative">
                        <router-link to="/qualitis" class="mainpages-box-title-jump"
                                     style="position: absolute;top: 10px;right: 10px;">
                            查看详情
                        </router-link>
                        <echarts id="huanbaowenti3" :option="zgtj_data" :styles="aq"></echarts>
                    </div>
                </div>
            </div>
        </div>
        <div class="mainpages-box-right">
            <div class="mainpages-box-min" style="height: 3.3rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>进度管理</span>
                    <router-link to="/datasource" class="mainpages-box-title-jump">查看详情</router-link>
                </div>
                <echarts id="mainpages3-1" :option="view1_1_data" :styles="mainpages3_1"></echarts>
            </div>
            <div class="mainpages-box-min" style="height: 2.8rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>质量管理</span>
                </div>
                <div class="shebei">
                    <div class="shebei-left" style="margin-top: 0.1rem">
                        <p class="shebei-left-line" style="color: #37a2da;font-size: 0.16rem">试验管控</p>
                        <echarts id="mainpages3-2" :option="view3_2_data" :styles="mainpages3_2"></echarts>
                    </div>
                    <div class="shebei-right" style="padding-top: 0.1rem;">
                        <p class="shebei-left-line" style="color: #37a2da;font-size: 0.16rem">生产施工</p>
                        <echarts id="mainpages3-2-1" :option="view_3_2_data" :styles="mainpages1_3"></echarts>
                    </div>
                </div>

            </div>
            <div class="mainpages-box-min" style="height: 2rem;">
                <div class="mainpages-box-title">
                    <i class="iconfont icon-you"></i>
                    <span>绿色施工</span>
                </div>
                <!--                <div class="mainpages-table renyuan-box">-->
                <!--                    <table>-->
                <!--                        <thead>-->
                <!--                        <tr>-->
                <!--                            <th style="width: 25%;">环境监测点</th>-->
                <!--                            <th style="width: 25%;">监测结果</th>-->
                <!--                            <th style="width: 25%;">操作</th>-->
                <!--                        </tr>-->
                <!--                        </thead>-->
                <!--                        <tbody>-->
                <!--                        <tr v-for="(p,index) in huanjing" :key="index">-->
                <!--                            <td>{{p.name}}</td>-->
                <!--                            <td>{{p.result}}</td>-->
                <!--                            <td>-->
                <!--                                <a href="#"-->
                <!--                                   style="color: #F8BC38;"-->
                <!--                                   @click="openNewWindow(p.url)">查看详情</a>-->
                <!--                            </td>-->
                <!--                        </tr>-->
                <!--                        </tbody>-->
                <!--                    </table>-->
                <!--                </div>-->
                <div class="shebei">
                    <div>
                        <echarts id="shuidi1" :option="shuidi1" :styles="shuidi"></echarts>
                        <a href="http://baisha.checcbim.com/video/indexfu.html"
                           target="_blank"
                           style="color: #F8BC38;
                           display: inline-block;
                           margin: 0 auto;
                           width: 100%;
                           text-align: center;
                           cursor: pointer"
                           @click="openNewWindow('http://baisha.checcbim.com/video/indexfu.html')">查看详情</a>
                    </div>
                    <div>
                        <echarts id="shuidi2" :option="shuidi2" :styles="shuidi"></echarts>
                        <a href="http://baisha.checcbim.com/video/indexyi.html"
                           target="_blank"
                           style="color: #F8BC38;
                           display: inline-block;
                           margin: 0 auto;
                           width: 100%;
                           text-align: center;
                           cursor: pointer;">查看详情</a>
                    </div>
                    <div>
                        <echarts id="shuidi3" :option="shuidi3" :styles="shuidi"></echarts>
                        <a href="http://baisha.checcbim.com/video/indexyacha.html"
                           target="_blank"
                           style="color: #F8BC38;
                           display: inline-block;
                           margin: 0 auto;
                           width: 100%;
                           cursor: pointer;
                           text-align: center;">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from '@/components/echarts/echarts.vue'
    import GisplusTitle1 from '@/components/gisplus/GisplusTitle1.vue'
    import 'echarts-liquidfill/src/liquidFill.js'

    export default {
        name: "MainPages1",

        mixins: [],

        components: {echarts, GisplusTitle1},

        props: {},

        data() {
            return {
                gclx: {
                    name: [],
                    finshed: [],
                    sum: [],
                    empty: [],
                    max: []
                },
                mainpages1_1: {
                    width: '3rem',
                    height: '1.6rem'
                },
                mainpages1_2: {
                    width: '5rem',
                    height: '1.4rem'
                },
                mainpages3_1: {
                    width: '5rem',
                    height: '3rem'
                },
                mainpages3_2: {
                    width: '2.83rem',
                    height: '2.1rem'
                },
                aq: {
                    width: '3rem',
                    height: '2.1rem'
                },
                shuidi: {
                    width: '1.7rem',
                    height: '1.9rem'
                },
                huanjing: [
                    {
                        name: '阜龙站点',
                        result: '合格',
                        url: 'http://baisha.checcbim.com/video/indexfu.html'
                    },
                    {
                        name: '一分部',
                        result: '合格',
                        url: 'http://baisha.checcbim.com/video/indexyi.html'
                    },
                    {
                        name: '牙叉隧道',
                        result: '合格',
                        url: 'http://baisha.checcbim.com/video/indexyacha.html'
                    },
                ],
                wuliao: [
                    {name: '水泥', num: 123, name1: '碎石', num1: 55},
                    {name: '砂', num: 123, name1: '机制砂', num1: 55},
                    {name: '外加剂', num: 123, name1: '钢筋', num1: 55},
                    {name: '钢绞线', num: 123, name1: '波纹管', num1: 55},
                    {name: '伸缩装置', num: 123, name1: '支座', num1: 55},
                ],
                mainpages1_3: {
                    width: '2.17rem',
                    height: '2.1rem',
                },
                //安全隐患部门
                aqyh_dept: {
                    dept1: 0,
                    dept2: 0,
                    dept3: 0,
                    dept4: 0,
                    zongbao: 0
                },
                //安全隐患等级
                aqyh_level: {
                    yiban: 0,
                    zhongda: 0
                },
                // 隐患分布
                yhfb: {
                    jiaoan: 0,
                    jidian: 0,
                    luji: 0,
                    lumian: 0,
                    qiaoliang: 0,
                    qita: 0,
                    suidao: 0
                },
                //环保问题
                hbwt: {
                    overdue: 0,
                    processed: 0,
                    sum: 0,
                    untreated: 0
                },
                //隐患趋势
                yhqs: {
                    month: [],
                    sumCount: [],
                    untreatedCount: []
                },
                //隐患整治
                yhzz: {
                    overdue: 0,
                    processed: 0,
                    sum: 0,
                    untreated: 0
                },
                zgtj: {
                    overdue: 0,
                    processed: 0,
                    sum: 1,
                    untreated: 1
                },
                active: 0,
            }
        },

        computed: {
            // 人员
            view1_2_data() {
                let data = [{value: 276, name: '中心实验室'},
                    {value: 22, name: '监理单位'},
                    {value: 856, name: '施工单位'},
                    {value: 13, name: '指挥部'}]
                return {
                    title: {
                        text: '参建人员统计',
                        left: 10,
                        top: 0,
                        textStyle: {
                            color: '#37a2da',
                            fontSize: 16
                        }
                    },
                    graphic: {       //图形中间文字
                        type: "text",
                        left: '56%',
                        top: '45%',
                        bottom: 0,
                        style: {
                            text: '总人数:' + (276 + 22 + 856 + 13),
                            textAlign: "center",
                            fill: "#fff",
                            fontSize: 16
                        }
                    },
                    color: ['#37a2da', '#ffdb5c', '#fb7292', '#8378ea'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 0,
                        top: '30%',
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        },
                        formatter: function (name) {
                            console.log(name);
                            let index
                            data.forEach(function (value, i) {
                                if (value.name == name) {
                                    index = i;
                                }
                            });
                            return name + ':' + data[index].value;
                        },
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'pie',
                            center: ['70%', '50%'],
                            radius: ['60%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }
                    ]
                }
            },
            // 考勤
            view1_3_data() {
                return {
                    title: {
                        text: '人员考勤(人)',
                        left: 10,
                        top: 0,
                        textStyle: {
                            color: '#37a2da',
                            fontSize: 16
                        },
                        x: 'center',
                    },
                    legend: {
                        right: 0,
                        top: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        },
                    },
                    color: ['#37a2da', '#F56C6C'],
                    tooltip: {
                        textStyle: {
                            align: 'left'
                        },
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '8%',
                        right: '4%',
                        bottom: '17%',
                        top: '25%',
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            // rotate: 30,
                            fontSize: 12
                        },
                        textStyle: {
                            color: '#ffffff'
                        },
                        data: ['中心实验室', '监理单位', '施工单位', '指挥部'],
                    },
                    yAxis: {
                        nameRotate: 30,
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                    },
                    series: [
                        {
                            name: '已考勤',
                            type: 'bar',
                            barGap: 0,
                            barWidth: 30,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTop'
                                }
                            },
                            data: [12, 33, 10, 6]
                        },
                        {
                            name: '未考勤',
                            type: 'bar',
                            barWidth: 30,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTop'
                                }
                            },
                            data: [45, 34, 35, 6]
                        }
                    ]
                }
            },
            // 进度
            view1_1_data() {
                let that = this
                let data = []
                for (let i = 0; i < this.gclx.name.length; i++) {
                    data.push(this.gclx.finshed[i] / this.gclx.sum[i])
                }
                return {
                    tooltip: {
                        show: false,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (param) {
                            return false;
                        }
                    },
                    grid: { //设置网格属性
                        // show:true,
                        left: '130', //网格距离容器左侧的距离
                        right: '0', //网格距离容器右侧的距离
                        top: '10', //网格距离容器右侧的距离
                        bottom: '0', //网格距离容器右侧的距离
                        borderWidth: 1,
                        containLabel: false
                    },
                    xAxis: {
                        type: 'value',
                        show: false,
                        axisTick: { //去掉刻度
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#19358d",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: [
                        {
                            inverse: true,
                            type: 'category',
                            axisTick: { //去掉刻度
                                show: false
                            },
                            interval: 5,
                            splitNumber: 8,
                            inside: 'true',
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 16,
                                    fontFamily: 'Times New Roman',
                                },
                            },
                            axisLine: {
                                show: false
                            },
                            data: that.gclx.name
                        },
                        {
                            inverse: true,
                            type: 'category',
                            interval: 5,
                            axisTick: { //去掉刻度
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            splitNumber: 8,
                            data: this.gclx.empty
                        }],
                    series: [
                        { /*背景图*/
                            name: '总数',
                            type: 'bar',
                            yAxisIndex: 1,
                            silent: true,
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: '#1a349a',
                                    barBorderRadius: 50,
                                    borderWidth: 0,
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTopRight',
                                    offset: [0, -22],
                                    formatter: function (param) {
                                        let index = param.dataIndex
                                        let relVal = Number(that.gclx.finshed[index]).toFixed(2) + '/' + Number(that.gclx.sum[index]).toFixed(2);
                                        return relVal;
                                    },
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            barWidth: 10,
                            barGap: '20%',
                            data: this.gclx.max
                        },
                        {
                            name: '已完成',
                            type: 'bar',
                            barWidth: 10,
                            nameTextStyle: {
                                width: 20,
                                fontSize: 14,
                                fontFamily: "Times New Roman",
                                borderColor: '#51bbfe',
                                borderWidth: 1,
                                backgroundColor: '#022453',
                                color: '#fff',
                                padding: [4, 5, 4, 165],
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                    color: '#ffdb5c'
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: function (param) {
                                        return (param.data * 100).toFixed(1) + '%';
                                    },
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },
                            barGap: '20%',
                            data: data
                        },
                    ]
                }
            },
            // 质量管理
            view3_2_data() {
                let that = this
                let progress = []
                let data = {
                    name: ['钢筋力学性能实验', '水泥混凝土抗压强度试验', '钢筋机械接头力学性能实验', '水泥砂浆立方体抗压强度实验', '道路石油沥青性能实验', '沥青混合料性能实验'],
                    finshed: [12, 32, 54, 7, 67, 43],
                    sum: [34, 56, 67, 34, 89, 56]
                }
                for (let i = 0; i < data.name.length; i++) {
                    progress.push(data.finshed[i] / data.sum[i])
                }
                return {
                    tooltip: {
                        show: false,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (param) {
                            return false;
                        }
                    },
                    grid: { //设置网格属性
                        // show:true,
                        left: '0', //网格距离容器左侧的距离
                        right: '0', //网格距离容器右侧的距离
                        top: '10', //网格距离容器右侧的距离
                        bottom: '0', //网格距离容器右侧的距离
                        borderWidth: 1,
                        containLabel: false
                    },
                    xAxis: {
                        type: 'value',
                        show: false,
                        axisTick: { //去掉刻度
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#19358d",
                                width: 1
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: [
                        {
                            inverse: true,
                            type: 'category',
                            axisTick: { //去掉刻度
                                show: false
                            },
                            splitNumber: 6,
                            showMinLabel: true,
                            axisLabel: {
                                interval: 0,
                                inside: 'true',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                    fontFamily: 'Times New Roman',
                                },
                                formatter: function (name) {
                                    console.log(name);
                                    return name + '\n' + '\n'
                                },
                            },
                            axisLine: {
                                show: false
                            },
                            data: data.name
                        },
                        {
                            inverse: true,
                            type: 'category',
                            interval: 5,
                            axisTick: { //去掉刻度
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            splitNumber: 8,
                            data: ['', '', '', '', '', '']
                        }],
                    series: [
                        { /*背景图*/
                            name: '总数',
                            type: 'bar',
                            yAxisIndex: 1,
                            silent: true,
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: '#1a349a',
                                    barBorderRadius: 50,
                                    borderWidth: 0,
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideTopRight',
                                    offset: [0, -22],
                                    formatter: function (param) {
                                        let index = param.dataIndex
                                        let relVal = data.finshed[index] + '/' + data.sum[index] + '(' + (progress[index] * 100).toFixed(2) + '%)';
                                        return relVal;
                                    },
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            barWidth: 10,
                            barGap: '20%',
                            data: [1, 1, 1, 1, 1, 1]
                        },
                        {
                            name: '已完成',
                            type: 'bar',
                            barWidth: 10,
                            nameTextStyle: {
                                width: 20,
                                fontSize: 14,
                                fontFamily: "Times New Roman",
                                borderColor: '#51bbfe',
                                borderWidth: 1,
                                backgroundColor: '#022453',
                                color: '#fff',
                                padding: [4, 5, 4, 165],
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,
                                    color: '#ffdb5c'
                                }
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'right',
                                    formatter: function (param) {
                                        return (param.data * 100).toFixed(1) + '%';
                                    },
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },
                            barGap: '20%',
                            data: progress
                        },
                    ]
                }
            },

            // 设备
            view_1_3_data() {
                let data = [
                    {value: 6, name: '运转正常'},
                    {value: 3, name: '运转异常'}
                ]
                return {
                    color: ['#67C23A', '#F56C6C'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    graphic: {       //图形中间文字
                        type: "text",
                        left: '40%',
                        top: '35%',
                        bottom: 0,
                        style: {
                            text: '总数:' + 9,
                            textAlign: "center",
                            fill: "#fff",
                            fontSize: 16
                        }
                    },
                    legend: {
                        bottom: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        },
                        formatter: function (name) {
                            console.log(name);
                            let index
                            data.forEach(function (value, i) {
                                if (value.name == name) {
                                    index = i;
                                }
                            });
                            return name + ':' + data[index].value;
                        },
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['center', '40%'],
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }
                    ]
                }
            },

            view_3_2_data() {
                let data = [
                    {value: 1, name: '单位工程'},
                    {value: 1, name: '分部工程'},
                    {value: 167, name: '分项工程'},
                ]
                return {
                    color: ['#ffdb5c', '#F56C6C', '#51bbfe'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    graphic: {       //图形中间文字
                        type: "text",
                        left: '40%',
                        top: '35%',
                        bottom: 0,
                        style: {
                            text: '总数:' + 169,
                            textAlign: "center",
                            fill: "#fff",
                            fontSize: 16
                        }
                    },
                    legend: {
                        bottom: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        },
                        formatter: function (name) {
                            console.log(name);
                            let index
                            data.forEach(function (value, i) {
                                if (value.name == name) {
                                    index = i;
                                }
                            });
                            return name + ':' + data[index].value;
                        },
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['center', '40%'],
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data
                        }
                    ]
                }
            },
            // 环保问题
            hbwt_data() {
                return {
                    title: {
                        text: '环保问题',
                        left: 10,
                        top: 10,
                        textStyle: {
                            color: '#37a2da',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['总数', '已整改', '未整改', '逾期'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    series: [
                        {
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            data: [
                                {itemStyle: {color: '#00f7ff'}, value: this.hbwt.sum},
                                {itemStyle: {color: '#0eff00'}, value: this.hbwt.processed},
                                {itemStyle: {color: '#ff4600'}, value: this.hbwt.untreated},
                                {itemStyle: {color: '#ff00cc'}, value: this.hbwt.overdue}
                            ],
                            type: 'bar',
                            color: '#fff'
                        },
                    ]
                }
            },
            // 安全问题
            yhzz_data() {
                return {
                    title: {
                        text: '安全问题',
                        left: 10,
                        top: 10,
                        textStyle: {
                            color: '#37a2da',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['总数', '已整改', '未整改', '逾期'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    series: [
                        {
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            data: [
                                {itemStyle: {color: '#00f7ff'}, value: this.yhzz.sum},
                                {itemStyle: {color: '#0eff00'}, value: this.yhzz.processed},
                                {itemStyle: {color: '#ff4600'}, value: this.yhzz.untreated},
                                {itemStyle: {color: '#ff00cc'}, value: this.yhzz.overdue}
                            ],
                            type: 'bar',
                            color: '#fff'
                        },
                    ]
                }
            },
            // 质量问题
            zgtj_data() {
                return {
                    title: {
                        text: '质量问题',
                        left: 10,
                        top: 10,
                        textStyle: {
                            color: '#37a2da',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}'
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        minInterval: 1,
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['总数', '已整改', '未整改', '逾期'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    series: [
                        {
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 14
                                    }
                                }
                            },
                            data: [
                                {itemStyle: {color: '#00f7ff'}, value: this.zgtj.sum},
                                {itemStyle: {color: '#0eff00'}, value: this.zgtj.processed},
                                {itemStyle: {color: '#ff4600'}, value: this.zgtj.untreated},
                                {itemStyle: {color: '#ff00cc'}, value: this.zgtj.overdue}
                            ],
                            type: 'bar',
                            color: '#fff'
                        },
                    ]
                }
            },

            shuidi1() {
                return {
                    title: {
                        text: '阜龙站点',
                        x: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: 'rgb(97, 142, 205)'
                        }
                    },
                    series: [{
                        type: 'liquidFill',
                        radius: '80%',
                        data: [0.36],
                        backgroundStyle: {
                            borderWidth: 2,
                            borderColor: 'rgb(255,0,255,0.9)',
                            color: 'rgb(255,0,255,0.01)'
                        },
                        label: {
                            normal: {
                                // formatter: (0.36 * 100).toFixed(0),
                                formatter: '合格',
                                textStyle: {
                                    fontSize: 14,
                                    color: '#67C23A'
                                }
                            }
                        },
                        outline: {
                            show: false
                        }
                    }]
                }
            },
            shuidi2() {
                return {
                    title: {
                        text: '一分部',
                        x: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: 'rgb(97, 142, 205)'
                        }
                    },
                    series: [{
                        type: 'liquidFill',
                        radius: '80%',
                        data: [0.45],
                        backgroundStyle: {
                            borderWidth: 2,
                            borderColor: 'rgb(255,0,255,0.9)',
                            color: 'rgb(255,0,255,0.01)'
                        },
                        label: {
                            normal: {
                                // formatter: (0.45 * 100).toFixed(0),
                                formatter: '合格',
                                textStyle: {
                                    fontSize: 14,
                                    color: '#67C23A'
                                }
                            }
                        },
                        outline: {
                            show: false
                        }
                    }]
                }
            },
            shuidi3() {
                return {
                    title: {
                        text: '牙叉隧道',
                        x: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: 'rgb(97, 142, 205)'
                        }
                    },
                    series: [{
                        type: 'liquidFill',
                        radius: '80%',
                        data: [0.23],
                        backgroundStyle: {
                            borderWidth: 2,
                            borderColor: 'rgb(255,0,255,0.9)',
                            color: 'rgb(255,0,255,0.01)'
                        },
                        label: {
                            normal: {
                                // formatter: (0.23 * 100).toFixed(0),
                                formatter: '合格',
                                textStyle: {
                                    fontSize: 14,
                                    color: '#67C23A'
                                },
                            }
                        },
                        outline: {
                            show: false
                        }
                    }]
                }
            },
        },

        watch: {},

        created() {
        },

        mounted() {
            let that = this
            that.getCzjd()
            that.getAqhb(12)
        },

        destroyed() {
        },

        methods: {
            getCzjd() {
                let that = this
                that.$store.dispatch('GetCzjd').then(res => {
                    let chanzhijindu = res.content.gclx
                    console.log(chanzhijindu);
                    let data = {
                        name: [],
                        finshed: [],
                        sum: [],
                        empty: [],
                        max: []
                    }
                    for (let i = 0; i < chanzhijindu.name.length; i++) {
                        if (i != -1) {
                            data.name.push(chanzhijindu.name[i])
                            data.finshed.push(chanzhijindu.finshed[i])
                            data.sum.push(chanzhijindu.sum[i])
                            data.empty.push('')
                            data.max.push(1)
                        }
                    }
                    that.gclx.name = data.name
                    that.gclx.finshed = data.finshed
                    that.gclx.sum = data.sum
                    that.gclx.empty = data.empty
                    that.gclx.max = data.max
                    console.log(that.gclx);
                })
            },
            getAqhb(params) {
                const that = this
                return that.request.getAqhb(params).then(function (response) {
                    let aqhb = response.content
                    console.log(aqhb)
                    that.aqyh_dept = aqhb.aqyh_dept
                    that.aqyh_level = aqhb.aqyh_level
                    that.hbwt = aqhb.hbwt
                    that.yhqs = aqhb.yhqs
                    that.yhzz = aqhb.yhzz
                    that.yhfb = aqhb.yhfb
                })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },
            getZlwt() {
                const that = this
                return that.request.getZlwt().then(function (response) {
                    let zlwt = response.content
                    console.log(zlwt)
                    that.dept = zlwt.dept
                    that.yhfb = zlwt.yhfb
                    console.log(that.yhfb)
                    that.yhqs = zlwt.yhqs
                    that.zgtj = zlwt.zgtj
                })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },
            changePoint(num) {
                this.active = num
                let message
                if (num == 1) {
                    message = {
                        type: 'topbar',  // 类型
                        uri: 'alllist',  // 地址
                    }
                }
                if (num == 2) {
                    return false
                } else if (num == 3) {
                    message = {
                        type: 'topbar',  // 类型
                        uri: 'shipin',  // 地址
                    }
                } else if (num == 4) {
                    message = {
                        type: 'topbar',  // 类型
                        uri: 'fengxian',  // 地址
                    }
                } else if (num == 5) {
                    message = {
                        type: 'topbar',  // 类型
                        uri: 'yinhuan',  // 地址
                    }
                }
                document.getElementById('gisplusiframe').contentWindow.postMessage(message, 'http://baisha.checcbim.com')
            },
            toDetails(url) {
                console.log(url)
            }
        }
    }
</script>

<style scoped lang="scss">
    .mainpages-box-title {
        position: relative;
        color: #00f6ff;
        height: 0.3rem;
        /*display: flex;*/
        /*justify-content: space-between;*/
        width: 100%;
        font-size: 0.16rem;
        line-height: 0.3rem;
        padding: 0 0.2rem;
        background: linear-gradient(to right, rgba(0, 246, 255, 0.3), transparent);
        border-bottom: 2px solid;
        border-image: linear-gradient(to right, #00f6ff, transparent) 30 30;
    }

    .mainpages-box-title-jump {
        cursor: pointer;
        color: #F8BC38;
        float: right;
        z-index: 1;
    }

    .mainpages-box-left {
        min-width: 5rem;
    }

    .mainpages-box-mid {
        width: 100%;
    }

    .mainpages-box-right {
        min-width: 5rem;
    }


    .mainpages-table {
        width: 100%;
    }

    .mainpages-table > table {
        width: 100%;
        font-size: 0.16rem;
        color: #5AC8FA;
        text-align: center;
        border: none;
        border-spacing: 0;
        line-height: 0.32rem;
    }

    .mainpages-table > table > thead {
        background: rgba(235, 235, 235, 0.1);
    }

    .mainpages-table > table > tbody {
        color: #a0acfa;
    }

    .mainpages-table > table > tbody > tr:nth-child(2n) {
        background: rgba(235, 235, 235, 0.1);
    }

    .shebei {
        display: flex;
        justify-content: space-between;
    }

    .shebei-left {
        color: #fff;
        line-height: 0.2rem;
        width: 2.83rem;
        font-size: 0.14rem;
        margin-top: 0.20rem;

        &-line {
            margin-bottom: 0.10rem;
            line-height: 0.2rem;
        }

        &-label {
            display: inline-block;
            width: 0.7rem;
            height: 0.2rem;
            text-align: center;
        }

        &-num {
            display: inline-block;
            width: 0.40rem;
            height: 0.20rem;
            background: rgba(72, 72, 72, 0.63);
            text-align: center;
        }

        &-until {
            margin-left: 0.1rem;
        }
    }

    .shebei-right {
        width: 2.17rem;
    }

    .gismid {
        position: relative;

        &-title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 4rem;
            border-radius: 0.2rem;
            height: 0.40rem;
            background: rgba(90, 200, 250, 0.33);
            display: flex;
            justify-content: space-around;
        }
    }

    .gisplus-iframe {
        width: 100%;
        height: 5.8rem;
    }
</style>
